﻿@page
@model IndexModel
@{
    ViewData["Title"] = "儿童照片库";
}

<div class="container mt-5">
    <!-- 标题和上传按钮 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>儿童照片库</h1>
        <a asp-page="Upload" class="btn btn-primary">上传新照片</a>
    </div>

    <!-- 分类筛选 -->
    <div class="mb-4">
        <a asp-page="Index" asp-route-pageNumber="1" class="btn btn-outline-secondary me-2 @(string.IsNullOrEmpty(Model.CurrentCategory) ? "active" : "")">
            全部照片
        </a>
        @foreach (var category in Model.Categories)
        {
            <a asp-page="Index"
               asp-route-category="@category"
               asp-route-pageNumber="1"
               class="btn btn-outline-secondary me-2 @(Model.CurrentCategory == category ? "active" : "")">
                @category
            </a>
        }
    </div>

    <!-- 照片列表 -->
    @if (Model.PagedPhotos.Items.Any())
    {
        <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-4">
            @foreach (var photo in Model.PagedPhotos.Items)
            {
                <div class="col">
                    <div class="card h-100">
                        <img src="~/uploads/@photo.StoredFileName"
                             class="card-img-top"
                             alt="@photo.FileName"
                             style="height: 200px; object-fit: cover;">
                        <div class="card-body">
                            <!-- 缩小照片名称字体 -->
                            <h5 class="card-title" style="font-size: 0.6rem; font-weight: normal;">@photo.FileName</h5>
                            <!-- 放大描述和分类字体 -->
                            <p class="card-text" style="font-size: 1.5rem;">@photo.Description</p>
                            <p class="card-text">
                                <small class="text-muted" style="font-size: 0.9rem;">
                                    分类: @(photo.Category ?? "未分类") |
                                    大小: @photo.FileSizeDisplay |
                                    上传: @photo.UploadTime.ToString("yyyy-MM-dd")
                                </small>
                            </p>
                        </div>
                        <div class="card-footer">
                            <a asp-page="Edit" asp-route-id="@photo.Id" class="btn btn-sm btn-outline-warning me-2">修改</a>
                            <form method="post" asp-page-handler="Delete" asp-route-id="@photo.Id" class="d-inline">
                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('确定要删除这张照片吗？')">删除</button>
                            </form>
                            <a href="/Download?id=@photo.Id" class="btn btn-sm btn-outline-primary">下载</a>
                        </div>
                    </div>
                </div>
            }
        </div>

        <!-- 分页控件 -->
        <div class="mt-5 d-flex justify-content-center">
            <nav aria-label="分页导航">
                <ul class="pagination">
                    <!-- 上一页 -->
                    <li class="page-item @(Model.PagedPhotos.CurrentPage == 1 ? "disabled" : "")">
                        <a class="page-link"
                           asp-page="Index"
                           asp-route-pageNumber="@(Model.PagedPhotos.CurrentPage - 1)"
                           asp-route-category="@Model.CurrentCategory">
                            上一页
                        </a>
                    </li>

                    <!-- 页码导航 -->
                    @for (int i = 1; i <= Model.PagedPhotos.TotalPages; i++)
                    {
                        if (i == 1 || i == Model.PagedPhotos.TotalPages ||
                        (i >= Model.PagedPhotos.CurrentPage - 2 && i <= Model.PagedPhotos.CurrentPage + 2))
                        {
                            <li class="page-item @(i == Model.PagedPhotos.CurrentPage ? "active" : "")">
                                <a class="page-link"
                                   asp-page="Index"
                                   asp-route-pageNumber="@i"
                                   asp-route-category="@Model.CurrentCategory">
                                    @i
                                </a>
                            </li>
                        }
                        else if (i == Model.PagedPhotos.CurrentPage - 3 || i == Model.PagedPhotos.CurrentPage + 3)
                        {
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                        }
                    }

                    <!-- 下一页 -->
                    <li class="page-item @(Model.PagedPhotos.CurrentPage == Model.PagedPhotos.TotalPages ? "disabled" : "")">
                        <a class="page-link"
                           asp-page="Index"
                           asp-route-pageNumber="@(Model.PagedPhotos.CurrentPage + 1)"
                           asp-route-category="@Model.CurrentCategory">
                            下一页
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="text-center text-muted mt-2">
            显示 @Model.PagedPhotos.CurrentPage / @Model.PagedPhotos.TotalPages 页，共 @Model.PagedPhotos.TotalItems 张照片
        </div>
    }
    else
    {
        <div class="alert alert-info">
            暂无照片，请点击"上传新照片"添加
        </div>
    }
</div>